<template>
    <div class="bom">
        <div class="box">
            <el-form :rules="rules" :model="infoForm" ref="infoForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="infoForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码 " prop="password">
                    <el-input v-model="infoForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('infoForm')">立即登录</el-button>

                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
import { userlogin } from '../request/app'
import { mapGetters, mapActions } from 'vuex'
export default {
    data() {
        return {
            infoForm: {
                username: '',
                password: ""
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                ],

            }
        }
    },
    methods: {
        ...mapActions({
            ACgetuser: 'setlogin/ACgetuser'
        }),
        submitForm(e) {
            this.$refs[e].validate((x) => {
                // console.log(x);
                if (x) {

                    userlogin(this.infoForm)
                        .then(res => {
                            // console.log(res);
                            if (res.code == 200) {
                                this.ACgetuser(res.list)
                                // console.log(this.getuser,'44444444444444444444');
                                
                                this.$router.push('/index')
                            } else {
                                this.$message.error(res.msg)
                            }
                        })

                } else {
                    console.log('登录失败');
                }

            })
        }
    },
    mounted() {
        console.log(this.getuser);
        // console.log();
    },
    computed: {
        ...mapGetters({
            getuser: 'setlogin/getuser'
        })
    },
    components: {
    },
}
</script>

<style scoped>
/* *{
    margin: 0;
    padding: 0;
} */
.bom {
    width: 100%;
    height: 650px;
    background-color: aquamarine !important;
    overflow: hidden;
}

.box {
    width: 390px;
    height: 500px;
    margin: 200px auto;
    text-align: center;
}
</style>
